<template>
  <div>
    <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
      <div class="intro-content" :title="introduce" ref="desc">
        <span class="merchant-desc" v-if="introduce">
          {{introduce}}
        </span>
        <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
          <p>{{exchangeButton ? '展开' : '收起'}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Spread',
  props :{
    desStr: {
      type: String,
      required: true
    },
  },
  data () {
    return {
      title: '演示展开收起',
      introduce: '',
      // 是否展示所有文本内容
      showTotal: true,
      // 显示展开还是收起
      exchangeButton: true,
      // 是否显示展开收起按钮
      showExchangeButton: false,
      rem: ''
    };
  },
  created () {
    this.init();
  },
  methods: {
    showTotalIntro () {
    //   console.log(this.showTotal);
      this.showTotal = !this.showTotal;
      this.exchangeButton = !this.exchangeButton;
    },
    getRem () {
      const defaultRem = 100;
      let winWidth = window.innerWidth;
      // console.log('winWidth:' + winWidth);
      let rem = winWidth / 1080 * defaultRem;
      return rem;
    },
    init () {
      this.introduce = this.desStr
    //   '拥有财富、名声、权力，，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。';
    }
  },
  watch: {
    'introduce': function () {
      this.$nextTick(function () {
        // 判断介绍是否超过三行
        let rem = parseFloat(this.getRem());
        // console.log('watch 中的rem', rem);
        if (!this.$refs.desc) {
          //console.log('desc null');
          return;
        }
        let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
        // console.log('descHeight:' + descHeight);
        //console.log('如果 descHeight 超过' + (2.1 * rem) + '就要显示展开按钮'); // 行高*行数 3*0.7rem
        if (descHeight > 2.1*rem) {
          // 显示展开收起按钮
          this.showExchangeButton = true;
          this.exchangeButton = true;
          // 不是显示所有
          this.showTotal = false;
        } else {
          // 不显示展开收起按钮
          this.showExchangeButton = false;
          // 没有超过三行就显示所有
          this.showTotal = true;
          // console.log('showExchangeButton', this.showExchangeButton);
          // console.log('showTotal', this.showTotal);
        }
      }.bind(this));
    }
  }
};
</script>

<style lang="scss">
   $fontColor: #838a96; // 字体颜色
   $fontSize: 0.4rem;   // 字体大小
   $lineHeight: 0.7rem;  // 行高
   $LineNumber: 3;   // 收缩显示行数
   $endSpace: 4em;//  尾部留空字符数 （4个字）
  
  .total-introduce {
    height: auto;
    overflow: hidden;
    //-------------------------- 展开字体颜色、大小-------------------------------------
    font-size: $fontSize;
    color: $fontColor;
    line-height: $lineHeight;

    .intro-content {
      .merchant-desc {
        width: 100%;
        line-height: $lineHeight;
      }
    }
    .unfold {
      display: block;
      z-index: 11;
      float: right;
    //   width: 40px;
      height: $lineHeight;
      p {
        margin: 0;
        line-height: $lineHeight;
        color: #7fbe87;
      }
    }
  }
  .detailed-introduce {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    // margin: 10px;
    .intro-content {
      // 最大高度设为3倍的行间距
      max-height: $lineHeight*$LineNumber;
      line-height: $lineHeight;
      word-wrap: break-word;
      /*强制打散字符*/
      word-break: break-all;
      background-color: #ffffff;
      /*同背景色*/
      color: #ffffff;
      overflow: hidden;
      .merchant-desc {
        width: 100%;
        line-height: $lineHeight;
      }
      &:after,
      // 这是展开前实际显示的内容
      &:before {
        content: attr(title);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        // ------------------收起字体颜色、大小--------------------
        color: $fontColor;
        font-size: $fontSize;
        line-height: $lineHeight;

        // overflow: hidden;
      }
      // 把最后最后一行自身的上面三行遮住
      &:before {
        display: block;
        overflow: hidden;
        z-index: 1;
        max-height: -$lineHeight+$lineHeight*$LineNumber;
        background: #ffffff;
      }
      &:after {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: $lineHeight*$LineNumber;   //-------------------------
        /*截取行数*/
        -webkit-line-clamp: $LineNumber;
        text-overflow: ellipsis;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        /*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
        text-indent: (1-$LineNumber)*$endSpace; 
        /*尾部留空字符数*/
        padding-right: $endSpace;
      }
      .unfold {
        z-index: 11;
        // width: 40px;
        height: $lineHeight;
        outline: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        p {
          margin: 0;
          line-height: $lineHeight;
          font-size: $fontSize;
          color: #7fbe87;
        }
      }
    }
  }
  
</style>